<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <link rel="stylesheet" href="../../css/aui.css">
	    <link rel="stylesheet" href="../../css/appraise.css">
	    <link rel="stylesheet" href="../../css/pulice.css">
		<style>
			.layui-m-layerchild{border-radius: 4px !important;width: 80%}
			#tk1{padding:0 0.775rem 1.5rem;}
			.tk1Btn{padding: 0 0.5rem}
			.tk1Btn button{border: 1px solid #fe0000;background: #fff;color: #fe0000;width: 30%;}
			.tk1Btn :last-child{background: #fe0000;color: #fff}
			.tk1Tit{color:#999;text-align: left;padding: 1.125rem 0;padding-left: .5rem;border-bottom: 1px solid #ccc;line-height: 1;font-size: .8rem;margin-bottom: 1rem}
		</style>
	    <script src="../../js/api.js"></script>
		<script src="../../js/libs/zepto.min.js"></script>

		<script src="../../js/layer.js"></script>
		<script>
			$(function () {
                $('.hm-bar').load('../../data/headerOther.html',function (data) {
                    $(this).find('.head-main').text('评价');
                    $(this).find('.hm-bar-box').css('position','static');
                    $(this).find('.head-left').on('tap',function () {
                        layer.open({
							type: 1,
							content: '',
							success: function (index, layero) {
                                $('.layui-m-layercont').html(
                                    '<div id="tk1">' +
									'	<div class="tk1Tit">是否放弃评价？</div>\n' +
							'           <div class="tk1Btn">' +
                                    '       <button class="tk1BtnClose">取消</button>' +
                                    '       &nbsp;&nbsp;&nbsp;&nbsp;' +
                                    '       <button class="tk1BtnEnter">确认</button>' +
                                    '	</div>\n' +
                                    '</div>'
                                );
                                $('.tk1BtnClose').on('tap',function () {
                                    layer.closeAll();
                                });
                                $('.tk1BtnEnter').on('tap',function () {
                                    layer.closeAll();
                                    window.history.back();
                                });
                            }
						});
                    })
                });
                 $('.upImgInp').on('change',function () {
					var obj = $('.upImgInp').get(0);
					var result = new FileReader();
					result.readAsDataURL(obj.files[0]);
					result.onload = function () {
                        var _length = $('.upImg').find('img').length;
                        console.log(_length);
                        if (_length <= 2) {
                            $('.upImg').append('<img class="upImgStyle" src="'+this.result+'" alt="" />');
                            if (_length == 2) {
                                $('.upClick').hide();
                                return;
                            }
                            $('.upClick').show();
                        }
                    }
                });

            })
		</script>
		<title>评价</title>
	</head>
	<body>
		<div class="hm-bar"></div>
		
		<div id="box">
			
			<div class="WD-shenti">
				
				
				<div class="WD-nav">
					<div class="WD-info flex al">
						<div class="lmLogo">
							<img src="../../img/smlogo.png" />
						</div>
						<div class="">
							<input type="text" readonly placeholder="西门子官方旗舰店" />
						</div>
					</div>
					
					<div class="pj-text">
						<textarea placeholder="分享你的购物心得" maxlength="100"></textarea>
					</div>
					
					<div class="upBtnBox">
						<div class="upImg">

						</div>
						<div class="upClick">
							<img class="upImgStyle upBtn" src="../../img/camera1.png" alt=""/>
							<input class="upImgInp" type="file" name="upInput" accept="image/*">
						</div>
					</div>
					
					
				</div>
				
				<div class="WD-nav">
					<div class="grade">
						<div class="grade-box flex">
							<div class="grade-text">
								描述相符
							</div>
							<div class="grade-img flex">
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/stater.png" />
								<img src="../../img/stater.png" />
							</div>
						</div>
						
						<div class="grade-box flex">
							<div class="grade-text">
								服务态度
							</div>
							<div class="grade-img flex">
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/stater.png" />
								<img src="../../img/stater.png" />
							</div>
						</div>
						
						<div class="grade-box flex">
							<div class="grade-text">
								发货速度
							</div>
							<div class="grade-img flex">
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/state.png" />
								<img src="../../img/stater.png" />
								<img src="../../img/stater.png" />
							</div>
						</div>
						<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
							<legend>半星效果</legend>
						</fieldset>
						
					</div>
					
					
				</div>
				
			</div>
			
			
			<div class="pj">
				立即评价
			</div>
		</div>	
		
	</body>
</html>
